<template>
  <div class="overlay" v-show="isactive">
      <div class="con">
      <h2 class="title">新增 | 修改</h2>
      <div class="content">
      <table>
      <tr>
      <td>药品编码</td>
      <td><input type="text" v-model="modifylist.barcode"></td>
      </tr>
      <tr>
      <td>生产厂家</td>
      <td><input type="text" v-model="modifylist.supplier"></td>
      </tr>
      <tr>
      <td>批文字号</td>
      <td><input type="text" v-model="modifylist.coding"></td>
      
      </tr>
      <tr>
      <td>药品名称</td>
      
      <td><input type="text" v-model="modifylist.name"></td>
        
      
      </td>
      </tr>
      <tr>
      <td>通用名</td>
      <td>
      <label><input type="text" v-model="modifylist.name_intro" value=""></label>
      </td>
      </tr>
      <tr>
      <td>规格</td>
      <td>
      <label><input type="text" v-model="modifylist.specification" value=""></label>
      </td>
      </tr>
      <tr>
      <td>剂型</td>
      <td>
      <label><input type="text" v-model="modifylist.unit" value=""></label>
      </td>
      </tr>
      <tr>
      <td>进价</td>
      <td>
      <label><input type="text" v-model="modifylist.in_price" value=""></label>
      </td>
      </tr>
      <tr>
      <td>处方价</td>
      <td>
      <label><input type="text" v-model="modifylist.out_price" value=""></label>
      </td>
      </tr>
      <tr>
      <td>数量</td>
      <td>
      <label><input type="text" v-model="modifylist.num" value=""></label>
      </td>
      </tr>

      <tr>
      <td>供货商</td>
      <td>
      <label><input type="text" v-model="modifylist.source" value=""></label>
      </td>
      </tr>

      <tr>
      <td>药品简写</td>
      <td>
      <label><input type="text" v-model="modifylist.spell_intro" value=""></label>
      </td>
      </tr>
      <tr>
      <td>生产日期</td>
      <td>
      <label><input type="date" :value="reverpro"></label>
      </td>
      </tr>
      <tr>
      <td>有效期</td>
      <td>
      <label><input type="date" :value="reverexp"></label>
      </td>
      </tr>
      <tr>
      <td>库存</td>
      <td>
      <label><input type="text" v-model="modifylist.nums" value=""></label>
      </td>
      </tr>
      </table>
      <p class="btngroup">
      <input type="button" class="btn" @click="changeActive" value="取消">
      <input type="button" class="btn" @click="modify" value="保存">
      </p>
      </div>
      </div>
  </div>
</template>

<script>
export default {
  name: "model",
  props: ["list", "isactive"],
  data() {
    return {
      msg: "青果科技开发"
    };
  },
  computed: {
    modifylist() {
      return this.list;
    },
    reverpro: function() {
      if(this.modifylist.produce_time){
           return this.modifylist.produce_time.substring(0, 10);
      }
     
    },
    reverexp: function() {
      if(this.modifylist.expired_time){
        return this.modifylist.expired_time.substring(0, 10);
      }
    }
  },
  methods: {
    changeActive() {
      this.$emit("change");
    },
    modify() {
      this.$emit("modify", this.modifylist);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.btngroup {
  text-align: center;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  background: rgba(0, 0, 0, 0.7);
}

.overlay td:first-child {
  width: 66px;
}

.overlay .con {
  position: absolute;
  width: 420px;
  min-height: 300px;
  background: #fff;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  /*margin-top: -150px;*/
  padding: 20px;
}
td {
  text-align: right;
  padding-right: 10px;
  font-weight: bold;
}
input[type=date]{
  width: 178px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #cccccc;
  border-radius: 4px;

}
input {
  margin: 5px 0;
}
</style>
